import { defineComponent, toRefs, ref, h, watch } from 'vue'
import './index.less'
import { Image, ImagePreviewGroup, message, Upload } from 'ant-design-vue'
import { FileTextOutlined, DownloadOutlined } from '@ant-design/icons-vue'
import PropTypes from '@/utils/PropTypes'
import { getFileType } from '@/utils/utils'
import downloadFile, { downloadZip } from '@/utils/downLoad'

export default defineComponent({
  name: 'ImagePreviewCom',
  props: {
    height: PropTypes.number().def(50),
    thumbUrl: PropTypes.string().def(''),
    border: PropTypes.string().def('1px solid #d9d9d9'),
    label: PropTypes.string().def('downloadFolder'),
    name: PropTypes.bool().def(true),
    down: PropTypes.bool().def(true),
  },
  setup(props) {
    const { height, thumbUrl, label, name, down } = toRefs(props)
    const visible = ref(false)
    const imageList = ref<any[]>([])
    const fileList = ref<any[]>([])
    const index = ref(0)
    const initImage = () => {
      thumbUrl.value?.split(',').filter((v: string, index: number) => {
        const fileName = name.value ? v.split('/')[v.split('/').length - 1] : ''
        if (getFileType(v.split('.')[1]) != 'picture') {
          fileList.value?.push({
            uid: `-${index + 1}`,
            name: fileName,
            status: 'done',
            url: process.env.VUE_APP_IMAGE_URL + v,
            thumbUrl: process.env.VUE_APP_IMAGE_URL + v,
          })
        } else {
          imageList.value.push({
            uid: `-${index + 1}`,
            name: fileName,
            status: 'done',
            url: process.env.VUE_APP_IMAGE_URL + v,
            thumbUrl: process.env.VUE_APP_IMAGE_URL + v,
          })
        }
      })
    }
    const download = async () => {
      if (!imageList.value.length) return message.error('无文件可下载')
      if (imageList.value.length > 1) {
        downloadZip(imageList.value, label.value)
        return
      }
      downloadFile(imageList.value[0])
    }
    thumbUrl.value && initImage()
    watch(
      () => thumbUrl.value,
      (val) => {
        if (val) {
          initImage()
        } else {
          imageList.value = []
          fileList.value = []
        }
      },
    )
    return () => (
      <div>
        {imageList.value.length > 0 && (
          <div class="image-preview-box" style={{ border: props.border }}>
            <ImagePreviewGroup>
              {imageList.value.map((item: any, i: number) => {
                return i == 0 ? (
                  <>
                    <Image
                      src={imageList.value[index.value].url}
                      height={height.value}
                      onClick={() => (visible.value = true)}
                    />
                    {name.value && (
                      <span class="preview-text ellipsis">
                        {item.url?.split('/')[item.url?.split('/').length - 1]}
                      </span>
                    )}
                  </>
                ) : (
                  <div style="display: none">
                    <Image src={item?.url} height={height.value} />
                  </div>
                )
              })}
              {down.value &&
                h(
                  DownloadOutlined,
                  { class: 'preview-download', onClick: download },
                  [],
                )}
            </ImagePreviewGroup>
          </div>
        )}
        {fileList.value.length > 0 && (
          <Upload
            v-model:file-list={fileList.value}
            list-type="text"
            class="upload-list-inline"
            maxCount={10}
            showUploadList={{ showRemoveIcon: false }}
            v-slots={{
              previewIcon: () =>
                h(DownloadOutlined, { style: { color: '#2FA4A2' } }),
              downloadIcon: () =>
                h(DownloadOutlined, { style: { color: '#2FA4A2' } }),
              iconRender: () =>
                h(FileTextOutlined, { style: { color: '#2FA4A2' } }),
            }}
          ></Upload>
        )}
      </div>
    )
  },
})
